<template>
  <div>
    <div class="cont">
      <input v-model="ele" type="text" placeholder="电表号/批次号" />
      <el-button @click="search()" @keydown="search()">搜索</el-button>
      <!-- 上方按钮 -->
      <div class="top">
        <button @click="dialogFormVisible = true">新增</button>
        <button @click="open()">删除</button>
      </div>
      <!-- 下方表格 -->
      <div class="down">
        <el-table
          ref="multipleTable"
          :data="tableData3"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            prop="ammeterId"
            label="电表号"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="companyTypeString"
            label="厂家"
            width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="message"
            label="通讯方式"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="protocols"
            label="规约"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="manageCompanyString"
            label="管理单位"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="voltage"
            label="电压(V)"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="electricity"
            label="电流(A)"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="connection"
            label="接线方式"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="batchNumber"
            label="批次号"
            show-overflow-tooltip
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="
                  handleEdit(scope.$index, scope.row),
                    (dialogFormVisible1 = true)
                "
                >修改</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            width="100"
            filter-placement="bottom-end"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status === 1 ? 'success' : 'warning'"
                v-text="scope.row.status === 1 ? '运行' : '在库'"
                disable-transitions
                >{{ scope.row.status }}</el-tag
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 20, 30, 40]"
            :page-size="sizes"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 修改弹出层 -->
      <div class="block">
        <el-dialog title="修改" :visible.sync="dialogFormVisible1">
          <el-form :model="form" label-position="left">
            <el-form-item label="电表号" :label-width="formLabelWidth">
              <input class="inpe" type="text" v-model="ammeterId" />
            </el-form-item>
            <el-form-item label="批次号" :label-width="formLabelWidth">
              <input class="inpe" type="text" v-model="batchNumber" />
            </el-form-item>
            <el-form-item label="接线方式" :label-width="formLabelWidth">
              <input class="inpe" type="text" v-model="connection" />
            </el-form-item>
            <el-form-item label="电流" :label-width="formLabelWidth">
              <input class="inpe" type="text" v-model="electricity" />
            </el-form-item>
            <el-form-item label="通讯方式" :label-width="formLabelWidth">
              <input class="inpe" type="text" v-model="message" />
            </el-form-item>
            <el-form-item label="规约" :label-width="formLabelWidth">
              <input class="inpe" type="text" v-model="protocols" />
            </el-form-item>
            <el-form-item label="电压" :label-width="formLabelWidth">
              <input class="inpe" type="text" v-model="voltage" />
            </el-form-item>
            <el-form-item label="厂家" label-width="120px">
              <el-select v-model="companyType" placeholder="请选择厂家">
                <el-option
                  v-for="item in table"
                  :key="item.id"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option> </el-select
            ></el-form-item>
            <el-form-item label="管理单位" label-width="120px">
              <el-select v-model="manageCompany" placeholder="请选择管理单位">
                <el-option
                  v-for="item in table1"
                  :key="item.id"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option> </el-select
            ></el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button
              type="primary"
              @click="(dialogFormVisible1 = false), choose()"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
      <!-- 弹出层 -->
      <el-dialog title="新增" :visible.sync="dialogFormVisible">
        <div>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-col :span="12">
              <el-form-item label="最小电表号" prop="firstId">
                <el-input v-model="ruleForm.firstId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最大电表号" prop="lastId">
                <el-input v-model="ruleForm.lastId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12"
              ><el-form-item label="规约" prop="protocols">
                <el-input
                  v-model="ruleForm.protocols"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="12"
              ><el-form-item label="管理单位" prop="manageCompany">
                <el-select
                  v-model="ruleForm.manageCompany"
                  placeholder="请选择管理单位"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in table1"
                    :key="item.id"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="12"
              ><el-form-item label="电压" prop="voltage">
                <el-input v-model="ruleForm.voltage"></el-input> </el-form-item
            ></el-col>
            <el-col :span="12"
              ><el-form-item label="电流" prop="electricity">
                <el-input
                  v-model="ruleForm.electricity"
                ></el-input></el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="接线方式" prop="connection">
                <el-input v-model="ruleForm.connection"></el-input
              ></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="厂家" prop="companyType">
                <el-select
                  v-model="ruleForm.companyType"
                  placeholder="请选择厂家"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in table"
                    :key="item.id"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option> </el-select
              ></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="通讯方式" prop="message">
                <el-input v-model="ruleForm.message"></el-input
              ></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="批次号" prop="batchNumber">
                <el-input v-model="ruleForm.batchNumber"></el-input
              ></el-form-item>
            </el-col>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            :plain="true"
            @click="(dialogFormVisible = false), submitForm('ruleForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  GetEAddApi,
  GetEDelApi,
  GetElectricity,
  GetEChangeApi,
  Dict,
} from "../../src/request/api";
export default {
  data() {
    return {
      tableData3: [],
      table: [],
      table1: [],
      deldialogFormVisible: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      form: {
        Id: "",
        region: "",
      },
      formLabelWidth: "120px",
      ruleForm: {
        firstId: "",
        lastId: "",
        protocols: "",
        manageCompany: "",
        voltage: "",
        electricity: "",
        connection: "",
        batchNumber: "",
        message: "",
        companyType: "",
      },
      rules: {
        firstId: [
          { required: true, message: "请输入最小电表号", trigger: "blur" },
        ],
        lastId: [
          { required: true, message: "请输入最大电表号", trigger: "blur" },
        ],
        protocols: [{ required: true, message: "请输入规约", trigger: "blur" }],
        manageCompany: [
          { required: true, message: "请输入管理单位", trigger: "change" },
        ],
        voltage: [{ required: true, message: "请输入电压", trigger: "blur" }],
        electricity: [
          { required: true, message: "请输入电流", trigger: "blur" },
        ],
        connection: [
          { required: true, message: "请输入接线方式", trigger: "blur" },
        ],
        batchNumber: [
          { required: true, message: "请输入批次号", trigger: "blur" },
        ],
        message: [
          { required: true, message: "请输入通讯方式", trigger: "blur" },
        ],
        companyType: [
          { required: true, message: "请输入厂家", trigger: "change" },
        ],
      },
      currentPage4: 1,
      total: 0,
      sizes: 10,
      ammeterId: "",
      ele: "",
      newArr: "",
      batchNumber: "",
      companyType: "",
      connection: "",
      electricity: "",
      manageCompany: "",
      message: "",
      protocols: "",
      voltage: "",
      id: "",
      val1: null,
      val2: null,
    };
  },

  created() {
    // this.dic();
    Dict({ dictType: "companyType" }).then((res) => {
      this.table = res.data.data;
    });
    Dict({ dictType: "manageCompany" }).then((res) => {
      this.table1 = res.data.data;
    });
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleSizeChange(val) {
      this.val1 = val;
      GetElectricity({
        ammeterId: this.ammeterId,
        currentPage: this.currentPage,
        pageSize: this.val1,
      }).then((res) => {
        this.tableData3 = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    handleCurrentChange(val) {
      this.val2 = val;
      GetElectricity({
        ammeterId: this.ammeterId,
        currentPage: this.val2,
        pageSize: this.val1,
      }).then((res) => {
        this.tableData3 = res.data.data.records;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // 获取id
      let newArr = val.map((item) => {
        return item.id;
      });
      this.newArr = newArr;
    },

    search() {
      let ammeterId = this.ele;
      this.ammeterId = ammeterId;
      GetElectricity({ ammeterId: this.ammeterId }).then((res) => {
        console.log(res);
        this.tableData3 = res.data.data.records;

        this.total = res.data.data.total;
        this.sizes = res.data.data.size;
      });
      this.ele = "";
    },
    del() {
      let arr2 = this.newArr;
      let arr3 = arr2.toString();
      GetEDelApi({ ids: arr3 }).then((res) => {
        this.getList();
        this.msg(res);
      });
    },
    handleEdit(index, row) {
      this.id = row.id;
      this.ammeterId = row.ammeterId;
      this.batchNumber = row.batchNumber;
      this.companyType = row.companyType;
      this.connection = row.connection;
      this.electricity = row.electricity;
      this.message = row.message;
      this.protocols = row.protocols;
      this.voltage = row.voltage;
      this.manageCompany = row.manageCompany;
    },
    submitForm() {
      GetEAddApi({
        firstId: this.ruleForm.firstId,
        lastId: this.ruleForm.lastId,
        protocols: this.ruleForm.protocols,
        manageCompany: this.ruleForm.manageCompany,
        voltage: this.ruleForm.voltage,
        electricity: this.ruleForm.electricity,
        connection: this.ruleForm.connection,
        batchNumber: this.ruleForm.batchNumber,
        message: this.ruleForm.message,
        companyType: this.ruleForm.companyType,
      }).then((res) => {
        this.msg(res);
        this.getList();
        this.ruleForm = "";
      });
    },
    choose() {
      GetEChangeApi({
        id: this.id,
        ammeterId: this.ammeterId,
        protocols: this.protocols,
        voltage: this.voltage,
        companyType: this.companyType,
        electricity: this.electricity,
        batchNumber: this.batchNumber,
        connection: this.connection,
        batchNumber: this.batchNumber,
        message: this.message,
        manageCompany: this.manageCompany,
      }).then((res) => {
        this.getList();
        this.msg(res);
      });
    },
    
    getList() {
      GetElectricity({}).then((res) => {
        console.log(res);
        this.tableData3 = res.data.data.records;

        this.total = res.data.data.total;
        this.sizes = res.data.data.size;
        if(res.data.code ==500){
          alert("登录已过期")
        this.$router.push("/")
      }
      });
    },
    msg(res) {
      if (res.data.code == 0) {
        this.$message({
          message: res.data.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: res.data.msg,
          type: "error",
        });
      }
    },
    open() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.del();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped lang="less">
.cont {
  input {
    height: 35px;
    width: 30%;
    line-height: 35px;
    padding-left: 30px;
    background-color: #f2fafe;
    border: none;
  }
  input::-webkit-input-placeholder {
    color: #acdbef;
  }
  input:focus {
    outline: none;
  }
  width: 100%;
  max-height: 2000px;
  background-color: #fff;
  margin-top: 20px;
  .top {
    margin: 20px 0 0 20px;
    display: flex;
    justify-content: flex-start;
    button {
      margin-right: 10px;
      width: 60px;
      height: 30px;
      border: 2px solid #008ecb;
      color: #008ecb;
      font-size: 12px;
      background-color: #fff;
    }
  }
  /deep/ .down {
    margin: 0 20px;
    position: relative;
  }
}
</style>